<template>
<div>
  <H1>
    <template v-slot:title>商品管理</template>
    <template v-slot:subheading></template>
  </H1>
  <DataA></DataA>
  <el-row :gutter="20" style="margin: 15px 0">
    <el-col :span="2"><p style="text-align: center; line-height: 30px">商品分类</p></el-col>
    <el-col :span="4"><el-input v-model.trim="input" placeholder="请输入关键字" /></el-col>
    <el-col :span="1.5"><el-button class="button" type="warning" @click="search">搜索</el-button></el-col>
    <el-col :span="6"><el-button class="button" type="warning" @click="dialogVisible = true">添加</el-button></el-col>
  </el-row>
  <el-dialog
      v-model="dialogVisible"
      title="添加分类"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" ref="formRef" :model="formInline" class="demo-form-inline">
      <el-form-item
          prop="name"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          label="商品名称">
        <el-input v-model.trim="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="price"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          label="商品价钱">
        <el-input v-model.number="formInline.price" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="num"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          label="商品数量">
        <el-input v-model.number="formInline.num" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="style"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          label="商品风格">
        <el-input v-model="formInline.style" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="warning" class="button" @click="onSubmit(formRef)">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <TableB></TableB>
</div>
</template>

<script lang="ts" setup>
import H1 from "../H1.vue"
import DataA from '../Data.vue'
import TableB from "./Table.vue"
import useStore from "../../modules/store/proList.ts"
import { ref,reactive } from 'vue'
//@ts-ignore
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'

const store = useStore()
console.log(store)
// 定义一个响应式的input值
const input = ref(null)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false);
const formRef = ref<FormInstance>()
const formInline = reactive({
  name: '',
  price: 0,
  // key: store.proList.length+1,
  key: 0,
  num: 0,
  style: ''
})
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  console.log(formEl)
  formEl.validate((valid:boolean) => {
    if (valid) {
      console.log(formInline)
      dialogVisible.value = false
      // store.editA(formInline,key)
      formInline.key = store.proList.length+1
      store.add(formInline)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

// 对话框的点击框外的事件
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

console.log(store.proList)


// const onSubmit = () => {
//   // console.log(formInline.value)
//   // dialogVisible.value = false
//   if(formInline.name === ''){
//     ElMessage({
//       message: '数据为空',
//       type: 'warning'
//     })
//     return
//   }
//
// }


// 搜索列表
const search = ()=>{
  //  @ts-ignore 调用pinia中的搜索方法
  store.search(input.value)
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
::v-deep.el-form-item__content{
  justify-content: center;
}
</style>
